<template>
  <div class="big-box">
    <stat></stat>
    <!-- 头部 -->
    <div class="header" @click="goFn()">
      <div class="h-left">
        <div class="time">
          <img src="@/assets/bigScreen/time.png" alt="" />
          <div class="date">{{ dates }}</div>
        </div>
        <div class="tq">
          <img src="@/assets/bigScreen1/house.png" alt="" />
          <!-- <div class="tq-text">晴 {{ 20 }} ℃</div> -->
          <div class="tq-text">房屋总数: {{ houseCount }}栋</div>
        </div>
      </div>
      <div class="h-center">
        <div class="title">村民经营性自建房消防安全排查治理平台</div>
      </div>
      <div class="h-right">
        <!-- <div class="time-title">时间区间：</div> -->
        <div class="time-content">
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="timeChange"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            size="default"
          />
        </div>
      </div>
    </div>
    <!-- 主题内容 -->
    <div class="content">
      <div class="box-con">
        <!-- 左边 -->
        <div class="main-l">
          <div class="m-l-bottom">
            <div class="title-item animate__animated animate__fadeInUp">
              <div class='t-title'>人员疏散通道情况</div>
              <div class="t-content">
                (
                <div class="ydb">已达标：{{ ryssMsg.ydb }}</div>
                <div class="wdb">未达标：{{ ryssMsg.wdb }}</div>
                <div class="dbl">达标率：{{ ryssMsg.dbl }}</div>
                )
              </div>
              <div class="more" @click="openRyss">
                <div class="btns">
                  <div class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <list1
                :key="currentIndex"
                :listData="rysstdData"
                @quCurrentClick="quCurrentRyssClick"
              ></list1>
            </div>
          </div>
          <div class="m-l-bottom">
            <div class="title-item animate__animated animate__fadeInUp">
              <!-- <div>电动自行车违规情况</div> -->
              <div class='t-title'>充电设施配比情况</div>
              <div class="more" @click="openCdsspb">
                <div class="btns">
                  <div class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <!-- <left1
                :key="1"
                :xData="ddzxcXData"
                :data2="ddzxcQLData"
                :legendText="['清理电动自行车数量']"
                @quCurrentClick="quCurrentDdzxcClick"
              ></left1> -->
              <list4
                :key="currentIndex"
                :listData="cdsspbData"
                @quCurrentClick="quCurrentCdsspbClick"
              ></list4>
            </div>
          </div>
          <div class="m-l-bottom">
            <div class="title-item animate__animated animate__fadeInUp">
              <div class='t-title'>电动自行车违规情况</div>
              <div class="t-content">
                (
                <div class="ydb">已清理：{{ ddcMsg.zg }} 辆</div>
                )
              </div>
              <div class="more" @click="openDdc">
                <div class="btns">
                  <div class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <left1
                :key="1"
                :xData="ddzxcXData"
                :data2="ddzxcQLData"
                :legendText="['清理电动自行车数量']"
                @quCurrentClick="quCurrentDdzxcClick"
              ></left1>
            </div>
          </div>
          <div class="m-l-bottom">
            <div class="title-item animate__animated animate__fadeInUp">
              <div class='t-title'>护栏拆除情况</div>
              <div class="t-content">
                (
                <div class="ydb">护栏总数：{{ hlccMsg.zcount }}个</div>
                <div class="wdb">已拆除：{{ hlccMsg.ycc }}个</div>
                <div class="dbl">拆除率：{{ hlccMsg.ccl }}</div>
                )
              </div>
              <div class="more" @click="openHlcc">
                <div class="btns">
                  <div class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <list2
                :key="currentIndex"
                :listData="hlccData"
                @quCurrentClick="quCurrentHlccClick"
              ></list2>
            </div>
          </div>
          <div class="m-l-bottom">
            <div class="title-item animate__animated animate__fadeInUp">
              <div class='t-title'>宣传警示开展情况</div>
              <div class="t-content">
                (
                <div class="ydb">安装栋数：{{ xcjsMsg.azds }}</div>
                <div class="wdb">安装率：{{ xcjsMsg.azl }}</div>
                )
              </div>
              <div class="more" @click="openXcjs">
                <div class="btns">
                  <div class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <list3
                :key="currentIndex"
                :listData="xcjskzData"
                @quCurrentClick="quCurrentXcjsClick"
              ></list3>
            </div>
          </div>
          <!-- <div class="m-l-bottom1">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>清理液化石油气情况</div>
              <div class="more" @click="openQlyh">
                <div class="btns">
                  <div class="m-btns">
                    <img src="@/assets/bigScreen1/more.png" />
                  </div>
                </div>
              </div>
            </div>
          <div class="content1 animate__animated animate__fadeInUp">
              <div class="ages-box">
                <div class="ages-box-item">
                  <div style="margin: 0; color: #1b7ef2; font-size: 1.3rem">
                    <span>{{ qlyhsyqData[0].name }}</span>
                    <span>:{{ qlyhsyqData[0].value }}</span>
                    <span>{{ qlyhsyqData[0].unit }}栋</span>
                  </div>
                </div>
                <div class="ages-box-item">
                  <div style="margin: 0; color: #00e0fc; font-size: 1.3rem">
                    <span>{{ qlyhsyqData[1].name }}</span>
                    <span>:{{ qlyhsyqData[1].value }}</span>
                    <span>{{ qlyhsyqData[1].unit }}个</span>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
        <!-- 中间 -->
        <div class="main-c">
          <div class="m-c-top">
            <div class="top-list animate__animated animate__fadeInUp">
              <div
                class="l-item"
                v-for="(item, index) in topList"
                @click="tabClick(item)"
              >
                <div class="icon">
                  <img :src="item.url" />
                </div>
                <div class="zcl">
                  <div class="bottom">{{ item.percent }}%</div>
                  <div class="top">{{ item.name }}</div>
                </div>
                <div class="jzcs">
                  <div class="item">
                    <span class="title">{{ item.name1 }}</span> ：
                    <span class="value"> {{ item.value1 }} </span>
                    <span class="unit">{{ item.unit }}</span>
                  </div>
                  <div class="item">
                    <span class="title">{{ item.name2 }}</span> ：
                    <span class="value"> {{ item.value2 }} </span>
                    <span class="unit">{{ item.unit }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="m-c-center animate__animated animate__fadeInUp">
            <!-- :mapData="mapData" -->
            <nmgMap
              :key="mapKey"
              :maplist="[]"
              :areaTypeMap="areaTypeMap"
              :mapParams="mapParams"
              @getMapList="getMapList"
              @quCurrentClick="quCurrentMapClick"
              @backMapFn="backMapFn"
              style="width: 100%; height: 100%"
            />
          </div>
          <div class="m-c-bottom">
            <div class="wrap">
              <div class="b-left">
                <div class="title-item animate__animated animate__fadeInUp">
                  <div>基础信息</div>
                  <div class="more" @click="openBJcxx">
                    <div class="btns">
                      <div class="m-btns">
                        <img src="@/assets/bigScreen1/more.png" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content1 animate__animated animate__fadeInUp">
                  <div class="sta-box">
                    <div
                      class="sta-li"
                      v-for="(item, index) in baseList"
                      :key="index"
                      @click="jcxxClick(item)"
                    >
                      <img :src="item.url" alt="" />
                      <div class="sta-li-r">
                        <div class="text">{{ item.name }}</div>
                        <div class="count">
                          <CountTo
                            :startVal="0"
                            :endVal="+item.value"
                            :separator="false"
                            :duration="2000"
                          /><span>{{ item.unit }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="b-right animate__animated animate__fadeInUp">
                <div class="title-item animate__animated animate__fadeInUp">
                  <div>基础建设情况</div>
                  <div class="more" @click="openJcjs">
                    <div class="btns">
                      <div class="m-btns">
                        <img src="@/assets/bigScreen1/more.png" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content1 animate__animated animate__fadeInUp">
                  <div class="sta-box">
                    <div
                      class="sta-li"
                      v-for="(item, index) in baseJsList"
                      :key="index"
                    >
                      <img src="@/assets/bigScreen/costa-bg.png" alt="" />
                      <div class="sta-li-r">
                        <div class="text">{{ item.name }}</div>
                        <div class="count">
                          <CountTo
                            :startVal="0"
                            :endVal="+item.value"
                            :separator="false"
                            :duration="2000"
                          /><span>{{ item.unit }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="main-r">
          <div class="m-r-top">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>{{ zjType }}覆盖率</div>
              <div class="btns">
                <div class="more">
                  <div
                    @click="openZcRight1('zc')"
                    :class="{ isActive: activeZcfxlItem === 'zc' }"
                    class="zc"
                  >
                    自查
                  </div>
                  <div
                    @click="openJcRight1('jc')"
                    :class="{ isActive: activeZcfxlItem === 'jc' }"
                    class="jc"
                  >
                    检查
                  </div>
                </div>
                <div @click="openRight1" class="m-btns">
                  <img src="@/assets/bigScreen1/more.png" />
                </div>
              </div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <right1
                :key="1"
                :xData="zcl_xData"
                :data1="zcl_sData"
                :legendText="zjLegendText"
                @quCurrentClick="quCurrentZclClick"
              ></right1>
            </div>
          </div>
          <div class="m-r-center">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>隐患发现率</div>
              <div class="btns">
                <div class="more">
                  <div
                    @click="openZcRight2('zc')"
                    :class="{ isActive: activeYhfxlItem === 'zc' }"
                    class="zc"
                  >
                    自查
                  </div>
                  <div
                    @click="openJcRight2('jc')"
                    :class="{ isActive: activeYhfxlItem === 'jc' }"
                    class="jc"
                  >
                    检查
                  </div>
                </div>
                <div @click="openRight2" class="m-btns">
                  <img src="@/assets/bigScreen1/more.png" />
                </div>
              </div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <!-- <right2 :key="currentIndex" :tableData="tableData"></right2> -->
              <right1
                :key="1"
                :xData="fxl_xData"
                :data1="fxl_sData"
                :legendText="['发现率']"
                @quCurrentClick="quCurrentFxlClick"
              ></right1>
            </div>
          </div>
          <div class="m-r-bottom">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>隐患整改率</div>
              <div class="btns">
                <div class="more">
                  <div
                    @click="openZcRight3('zc')"
                    :class="{ isActive: activeYhzglItem === 'zc' }"
                    class="zc"
                  >
                    自查
                  </div>
                  <div
                    @click="openJcRight3('jc')"
                    :class="{ isActive: activeYhzglItem === 'jc' }"
                    class="jc"
                  >
                    检查
                  </div>
                </div>
                <div @click="openRight3" class="m-btns">
                  <img src="@/assets/bigScreen1/more.png" />
                </div>
              </div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <right1
                :key="1"
                :xData="zgl_xData"
                :data1="zgl_sData"
                :legendText="['整改率']"
                @quCurrentClick="quCurrentZglClick"
              ></right1>
            </div>
          </div>
          <div class="m-r-bottom">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>隐患类型分析</div>
              <div class="btns">
                <div @click="openRight4" class="m-btns">
                  <img src="@/assets/bigScreen1/more.png" />
                </div>
              </div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <!-- <pie3 :data="yhqxzbData" /> -->
              <pieCharts :pieData="yhqxzbData" :isShowLegend="false" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 点击单个柱子的弹框 -->
    <table2Modal
      v-if="show2Table"
      :title="table2Title"
      :title2="table2Title2"
      :CurrentLevel="CurrentTable2Level"
      :maxL="maxL"
      @backFn="backTable2Fn"
      @changeModalVisibe="changeTable2Visibe"
    >
      <template v-slot:customContent>
        <div class="table-style">
          <Tables8
            ref="Tables8Ref"
            :tableData="zclXzList"
            :Params="fglParams"
            :isMapClick="isMapClick"
            v-if="table2Title === '自查覆盖率'"
            @updateCurrentQu="updateTable2Zcl"
          />
          <Tables9
            ref="Tables9Ref"
            :tableData="fxlXzList"
            :Params="fxlParams"
            :isMapClick="isMapClick"
            v-if="table2Title === '隐患发现率'"
            @updateCurrentQu="updateTable2Zcl"
          />
          <Tables10
            ref="Tables10Ref"
            :tableData="zglXzList"
            :Params="zglParams"
            :isMapClick="isMapClick"
            v-if="table2Title === '隐患整改率'"
            @updateCurrentQu="updateTable2Zcl"
          />
          <Tables2Ryss
            ref="Tables2RefRyss"
            :tableData="ryss2XzList"
            :Params="ryssParams"
            :isMapClick="isMapClick"
            v-if="table2Title === '人员疏散通道情况'"
            @updateCurrentQu="updateTable2Zcl"
          />
          <Tables2Ddc
            ref="Tables2RefDdc"
            :tableData="ddc2XzList"
            :Params="ddcParams"
            :isMapClick="isMapClick"
            v-if="table2Title === '电动自行车违规情况'"
            @updateCurrentQu="updateTable2Zcl"
          />
          <Tables2Cdss
            ref="Tables2RefCdss"
            :tableData="cdsspb2XzList"
            :Params="cdsspbParams"
            :isMapClick="isMapClick"
            v-if="table2Title === '充电设施配比情况'"
            @updateCurrentQu="updateTable2Zcl"
          />
          <Tables2Hlcc
            ref="Tables2RefHlcc"
            :tableData="hlcc2XzList"
            :Params="hlccParams"
            :isMapClick="isMapClick"
            v-if="table2Title === '护栏拆除情况'"
            @updateCurrentQu="updateTable2Zcl"
          />
          <Tables2Xcjs
            ref="Tables2RefXcjs"
            :tableData="xcjs2XzList"
            :Params="xcjsParams"
            :isMapClick="isMapClick"
            v-if="table2Title === '宣传警示开展情况'"
            @updateCurrentQu="updateTable2Zcl"
          />

        </div>
      </template>
    </table2Modal>
    <!-- 点击更多的弹框 -->
    <detailModal style="z-index:1001"
      v-if="showDetail"
      :title="tableTitle"
      :title2="title2"
      :CurrentLevel="CurrentLevel"
      :maxL="maxL"
      @backFn="backFn"
      @changeModalVisibe="changeModalVisibe"
    >
      <template v-slot:customContent>
        <div class="table-style">
          <!-- 自查率、检查率 的 表格 -->
          <Tables
            ref="TablesRefZcl"
            :tableData="zcQuList"
            v-if="tableTitle === '周自查率'"
            :Params="fglParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <Tables1
            ref="TablesRefJcl"
            :tableData="jcQuList"
            v-if="tableTitle === '周检查率'"
            :Params="fglParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <!-- 左侧更多 -->
          <TablesRyssMore
            ref="TablesRefRyssMore"
            :tableData="ryssMoreList"
            v-if="tableTitle === '人员疏散通道情况'"
            :Params="ryssParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <TablesDdcMore
            ref="TablesRefDdcMore"
            :tableData="ddcMoreList"
            v-if="tableTitle === '电动自行车违规情况'"
            :Params="ddcParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <TablesCdsspbMore
            ref="TablesRefCdsspbMore"
            :tableData="cdsspbMoreList"
            v-if="tableTitle === '充电设施配比情况'"
            :Params="cdsspbParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <TablesHlccMore
            ref="TablesRefHlccMore"
            :tableData="hlccMoreList"
            v-if="tableTitle === '护栏拆除情况'"
            :Params="hlccParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <TablesXcjsMore
            ref="TablesRefXcjsMore"
            :tableData="xcjsMoreList"
            v-if="tableTitle === '宣传警示开展情况'"
            :Params="xcjsParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />

          <!-- <TablesQlyhMore
            ref="TablesRefQlyhMore"
            :tableData="qlyhMoreList"
            v-if="tableTitle === '清理液化石油气情况'"
            :Params="qlyhParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          /> -->
          <!-- 中间更多 -->
          <TablesJcxxMore
            ref="TablesRefJcxxMore"
            :tableData="jcxxMoreList"
            v-if="tableTitle === '基础信息'"
            :Params="jcxxParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <TablesQtjyytMore
            ref="TablesRefQtjyytMore"
            :tableData="qtjyytMoreList"
            v-if="tableTitle === '其他经营业态'"
            :Params="qtjyytParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <TablesJcjsMore
            ref="TablesRefJcjsMore"
            :tableData="jcjsMoreList"
            v-if="tableTitle === '基础建设情况'"
            :Params="jcjsParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />

          <!-- 右侧更多 -->
          <TablesFgMore
            ref="TablesRefFgMore"
            :tableData="fgMoreList"
            v-if="tableTitle === `${zjType}覆盖率`"
            :Params="fglParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <TablesFxMore
            ref="TablesRefFxMore"
            :tableData="fxMoreList"
            v-if="tableTitle === '隐患发现率'"
            :Params="fxlParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
          <TablesZgMore
            ref="TablesRefZgMore"
            :tableData="zgMoreList"
            v-if="tableTitle === '隐患整改率'"
            :Params="zglParams"
            :isMapClick="isMapClick"
            @updateCurrentQu="updateCurrentQu"
          />
        </div>
      </template>
    </detailModal>
    <chartModal
      v-if="showChart"
      :title="chartTitle"
      @changeModalVisibe="changeChartVisibe"
    >
      <template v-slot:customContent>
        <div class="chart-style">
          <pieCharts
            :pieData="yhqxzbData"
            v-if="chartTitle === '隐患类型分析'"
            @clickMapItem="clickMapItem"
          />
          <!-- <pie3 :data="yhqxzbData"  v-if="chartTitle === '隐患类型分析'"/> -->
        </div>
      </template>
    </chartModal>
    <TableModal
      v-if="showTable3"
      :title="tableTitle3"
      :title2="table2Title3"
      :CurrentLevel="CurrentTableLevel3"
      :maxL="maxL"
      @backFn="backTableFn3"
      @changeModalVisibe="changeTableVisibe3">
      <template v-slot:customContent>
          <div class="table-style">
              <TablesYhlxMore
                ref="TablesRefYhlxMore"
                v-if="tableTitle3 === '隐患类型情况'"
                :tableTitle="tableTitle3"
                :Params="yhlxParamsT"
                :isMapClick="isMapClick"
                @updateCurrentQu="updateCurrentQu2"
              />
          </div>
      </template>
    </TableModal>
  </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import stat from './component/childComponent/stat.vue'
import { CountTo } from 'vue3-count-to'
import url5 from '@/assets/bigScreen/costa-bg.png'
import urlzc from '@/assets/bigScreen1/index/zc.png'
import urljc from '@/assets/bigScreen1/index/jc.png'
import line1 from '@/Pages/bigScreen/components/index/line1.vue' // 人员疏散通道建设情况
import bar1 from '@/Pages/bigScreen/components/index/bar1.vue' // 消防隐患处理情况
import left1 from '@/Pages/bigScreen/components/index/left1.vue' // 电动自行车情况
import right1 from '@/Pages/bigScreen/components/index/right1.vue' // 右侧的柱状图

import barCharts from '@/Pages/bigScreen/components/baseInfo/charts/barCharts.vue'
import nmgMap from '@/Pages/bigScreen/map/nmgMap.vue' // 地图
import pie1 from '@/Pages/bigScreen/components/index/pie1.vue' // 今日各区县自查情况
import pie2 from '@/Pages/bigScreen/components/index/pie2.vue' // 隐患类型分析
import pie3 from '@/Pages/bigScreen/components/index/pie3.vue' // 隐患类型分析
import pieCharts from '@/Pages/bigScreen/components/index/pieCharts.vue'
import right2 from '@/Pages/bigScreen/components/index/right2.vue'
import right3 from '@/Pages/bigScreen/components/index/right3.vue'
import list1 from '@/Pages/bigScreen/components/index/list1.vue'
import list2 from '@/Pages/bigScreen/components/index/list2.vue'
import list3 from '@/Pages/bigScreen/components/index/list3.vue'
import list4 from '@/Pages/bigScreen/components/index/list4.vue'

import detailModal from '@/Pages/bigScreen/components/detailModal.vue'

import table2Modal from '@/Pages/bigScreen/components/table2Modal.vue'
import chartModal from '@/Pages/bigScreen/components/chartModal.vue'

import TableModal from '@/Pages/bigScreen/components/tableModal.vue'

// 隐患覆盖率 点击柱子
import Tables8 from '@/Pages/bigScreen/components/Tables8.vue'
// 隐患发现率 点击柱子
import Tables9 from '@/Pages/bigScreen/components/Tables9.vue'
// 隐患整改率 点击柱子
import Tables10 from '@/Pages/bigScreen/components/Tables10.vue'
/************************* 左侧 ***************************/
// 人员疏散通道
import TablesRyssMore from '@/Pages/bigScreen/components/index/tables/TablesRyssMore.vue'
import TablesDdcMore from '@/Pages/bigScreen/components/index/tables/TablesDdcMore.vue'
import TablesHlccMore from '@/Pages/bigScreen/components/index/tables/TablesHlccMore.vue'
import TablesCdsspbMore from '@/Pages/bigScreen/components/index/tables/TablesCdsspbMore.vue'
import TablesXcjsMore from '@/Pages/bigScreen/components/index/tables/TablesXcjsMore.vue'
import TablesQlyhMore from '@/Pages/bigScreen/components/index/tables/TablesQlyhMore.vue'
import TablesJcxxMore from '@/Pages/bigScreen/components/index/tables/TablesJcxxMore.vue'
import TablesQtjyytMore from '@/Pages/bigScreen/components/index/tables/TablesQtjyytMore.vue'
import TablesJcjsMore from '@/Pages/bigScreen/components/index/tables/TablesJcjsMore.vue'
//
import TablesYhlxMore from '@/Pages/bigScreen/components/index/tables/TablesYhlxMore.vue'

// 二级
import Tables2Ryss from '@/Pages/bigScreen/components/index/tables/Tables2Ryss.vue'
import Tables2Ddc from '@/Pages/bigScreen/components/index/tables/Tables2Ddc.vue'
import Tables2Hlcc from '@/Pages/bigScreen/components/index/tables/Tables2Hlcc.vue'
import Tables2Cdss from '@/Pages/bigScreen/components/index/tables/Tables2Cdss.vue'
import Tables2Xcjs from '@/Pages/bigScreen/components/index/tables/Tables2Xcjs.vue'
import Tables2Qlyh from '@/Pages/bigScreen/components/index/tables/Tables2Qlyh.vue'
import Tables2Jcxx from '@/Pages/bigScreen/components/index/tables/Tables2Jcxx.vue'
import Tables2Jcjs from '@/Pages/bigScreen/components/index/tables/Tables2Jcjs.vue'
/************************* 中间 ***************************/
// 自查率 、检查率 弹框表格
import Tables from '@/Pages/bigScreen/components/Tables.vue'
import Tables1 from '@/Pages/bigScreen/components/Tables1.vue'
/************************* 右侧 ***************************/
// 隐患覆盖率 更多
import TablesFgMore from '@/Pages/bigScreen/components/index/tables/TablesFgMore.vue'
// 隐患发现率 更多
import TablesFxMore from '@/Pages/bigScreen/components/index/tables/TablesFxMore.vue'
// 隐患整改率 更多
import TablesZgMore from '@/Pages/bigScreen/components/index/tables/TablesZgMore.vue'
import { getBaseInfoMapData } from '@/api/index.js'
import {
  getRysstdData,
  getRysstdMsgData,
  getDDzxcwgqkData,
  getDDzxcwgqkMsgData,
  getCdsspbqkData,
  getDDzxcwgqkMoreData,
  getHlccqkData,
  getHlccqkMsgData,
  getXcjskzqkData,
  getXcjskzqkMsgData,
  getQlyhsyqqkData,
  getQlyhsyqqkMoreData,
  getTopCardData,
  getBaseInfoData,
  getBaseInfoData2,
  getBaseJSInfoData,
  getBaseJSInfoData2,
  getFglData, // 自查覆盖率
  getFglData2,
  getYhfxlData,
  getYhfxlData2,
  getYhzglData,
  getYhzglData2,
  getYhlxfxData,
} from '@/api/indexNew.js'

const currentIndex = ref(1)
const router = useRouter()
const dates = ref('') // 日期
const activeZcfxlItem = ref('zc') //  自查覆盖率 - 默认按钮高亮
const activeYhfxlItem = ref('zc') //  隐患发现率 - 默认按钮高亮
const activeYhzglItem = ref('zc') //  隐患整改率 - 默认按钮高亮
const params = ref({
  city: undefined,
})
const timeRange = ref(['2024-01-01', '2024-01-11'])
const defaultTime1 = new Date(2000, 1, 1) // '12:00:00'
const houseCount = ref('0')
const _getHouseCount = async () => {
  let res = await getFglData2(fglParams)
  let arr = res.data.data
  houseCount.value = sumZcount(arr)
}
function sumZcount(arr) {
  return arr.reduce((accumulator, currentValue) => {
    return accumulator + parseInt(currentValue.zcount)
  }, 0)
}
// 1.人员疏散通道
const rysstdData = ref([])
const _getRysstdData = async () => {
  let res = await getRysstdData(ryssParams)
  rysstdData.value = res.data.data
}
const ryss2XzList = ref([])
const quCurrentRyssClick = async (params) => {
  ryssParams.code = isMapClick.value ? params.towndm : params.xzqdm
  let res = await getRysstdData(ryssParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  currentTableTitle.value.push(params.xzq)
  if (isMapClick.value) {
    currentTableTitle.value.push(params.town)
  }
  ryss2XzList.value = modifiedList
  table2Title.value = '人员疏散通道情况'
  table2Title2.value = `-${currentTableTitle.value.join('-')}`
  show2Table.value = true
}
// 人员疏散通道-更多
const ryssParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const ryssMoreList = ref([])
const openRyss = async () => {
  tableTitle.value = '人员疏散通道情况'
  ryssParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getRysstdData(ryssParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  ryssMoreList.value = modifiedList
  if (ryssMoreList.value.length > 0) {
    showDetail.value = true
  }
}
// 人员疏散通道 -- msg
const ryssMsg = ref({
  ydb: '',
  wdb: '',
  dbl: '',
})
const _getRysstdMsgData = async () => {
  let res = await getRysstdMsgData(ryssParams)
  ryssMsg.value.ydb = res?.data?.data[0]?.ydb
  ryssMsg.value.wdb = res?.data?.data[0]?.wdb
  let dbl = res?.data?.data[0]?.dbl
  if(dbl === '100.00%'){
    dbl = '100%'
  }
  ryssMsg.value.dbl = dbl
}

// 2.电动自行车违规情况
const ddzxcXData = ref([])
const ddzxcFXData = ref([])
const ddzxcQLData = ref([])
const _getDDzxcwgqkData = async () => {
  let res = await getDDzxcwgqkData(ddcParams)
  let data = res?.data?.data
  ddzxcXData.value = res.data.data.name
  const arr1 = convertDataToArray(data, 'fx')
  const arr2 = convertDataToArray(data, 'zg')
  // ddzxcFXData.value = arr1
  ddzxcQLData.value = arr2
}
const ddc2XzList = ref([])
const quCurrentDdzxcClick = async (params) => {
  ddcParams.code = params.data.code
  let res = await getDDzxcwgqkMoreData(ddcParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  if (isMapClick.value) {
    currentTableTitle.value.push(mapName.value)
  }
  currentTableTitle.value.push(params.name)
  ddc2XzList.value = modifiedList
  table2Title.value = '电动自行车违规情况'
  table2Title2.value = `-${currentTableTitle.value.join('-')}`
  show2Table.value = true
}

// 电动自行车违规情况-更多
const ddcParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const ddcMoreList = ref([])
const openDdc = async () => {
  tableTitle.value = '电动自行车违规情况'
  ddcParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getDDzxcwgqkMoreData(ddcParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  ddcMoreList.value = modifiedList
  if (ddcMoreList.value.length > 0) {
    showDetail.value = true
  }
}

// 电动自行车违规情况 -- msg
const ddcMsg = ref({
  zg: '',
})
const _getDDzxcwgqkMsgData = async () => {
  let res = await getDDzxcwgqkMsgData(ryssParams)
  ddcMsg.value.zg = res?.data?.data?.zg
}

// 3.充电设施配比情况
const cdsspbData = ref([])
const _getCdsspbqkData = async () => {
  let res = await getCdsspbqkData(cdsspbParams)
  cdsspbData.value = res.data.data.data
}
const cdsspb2XzList = ref([])
const quCurrentCdsspbClick = async (params) => {
  cdsspbParams.code = isMapClick.value ? params.towndm : params.xzqdm
  let res = await getCdsspbqkData(cdsspbParams)
  let list = res.data.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  currentTableTitle.value.push(params.xzq)
  if (isMapClick.value) {
    currentTableTitle.value.push(params.town)
  }
  cdsspb2XzList.value = modifiedList
  table2Title.value = '充电设施配比情况'
  table2Title2.value = `-${currentTableTitle.value.join('-')}`
  show2Table.value = true
}

// 充电设施配比情况-更多
const cdsspbParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const cdsspbMoreList = ref([])
const openCdsspb = async () => {
  tableTitle.value = '充电设施配比情况'
  cdsspbParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getCdsspbqkData(cdsspbParams)
  let list = res.data.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  cdsspbMoreList.value = modifiedList
  if (cdsspbMoreList.value.length > 0) {
    showDetail.value = true
  }
}

// 3.护栏拆除情况
const hlccData = ref([])
const _getHlccqkData = async () => {
  let res = await getHlccqkData(hlccParams)
  hlccData.value = res.data.data
}


const hlcc2XzList = ref([])
const quCurrentHlccClick = async (params) => {
  hlccParams.code = isMapClick.value ? params.towndm : params.xzqdm
  let res = await getHlccqkData(hlccParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  currentTableTitle.value.push(params.xzq)
  if (isMapClick.value) {
    currentTableTitle.value.push(params.town)
  }
  hlcc2XzList.value = modifiedList
  table2Title.value = '护栏拆除情况'
  table2Title2.value = `-${currentTableTitle.value.join('-')}`
  show2Table.value = true
}



// 护栏拆除情况-更多
const hlccParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})

const hlccMoreList = ref([])
const openHlcc = async () => {
  tableTitle.value = '护栏拆除情况'
  hlccParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getHlccqkData(hlccParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  hlccMoreList.value = modifiedList
  if (hlccMoreList.value.length > 0) {
    showDetail.value = true
  }
}

// 护栏拆除情况 -- msg
const hlccMsg = ref({
  zcount: '',
  ycc: '',
  ccl: '',
})
const _getHlccqkMsgData = async () => {
  let res = await getHlccqkMsgData(ryssParams)
  hlccMsg.value.zcount = res?.data?.data[0]?.ckfhwggptzlsl
  hlccMsg.value.ycc = res?.data?.data[0]?.ccfhwggptzlsl
  // hlccMsg.value.ccl = res?.data?.data[0]?.ccl
  let ccl = res?.data?.data[0]?.ccl
  if (ccl === '100.00%') {
    ccl = '100%'
  }
  hlccMsg.value.ccl = ccl

}


const yhlxParamsT = reactive({
  startime: '2023-01-01',
  endtime: computed(() => timeRange.value[1]),
  yhlx:'',
  level:''

})
//

const showTable3 = ref(false)
const tableTitle3 = ref('')
const  table2Title3 = ref('')

const CurrentTableLevel3 = ref(1)
const backTableFn3 = () => {
  if (tableTitle3.value === '隐患类型情况') {
    TablesRefYhlxMore.value.backFn()
  }
}

const currentTableTitle3 = ref([])

const changeTableVisibe3 = (data) =>{
  showTable3.value = data
  tableTitle3.value = ''
  CurrentTableLevel3.value = 1
  currentTableTitle.value = []
  yhlxfxParams.code = ''
}

const clickMapItem = (params) =>{
  tableTitle3.value = '隐患类型情况'
  yhlxParamsT.yhlx = params
  yhlxParamsT.code = isMapClick.value ? mapCode.value : ''
  console.log(yhlxParamsT.code)
  yhlxParamsT.level = 1
  showTable3.value = true
}


// 4.宣传警示开展情况
const xcjskzData = ref([])
const _getXcjskzqkData = async () => {
  let res = await getXcjskzqkData(xcjsParams)
  xcjskzData.value = res.data.data
}
const xcjs2XzList = ref([])
const quCurrentXcjsClick = async (params) => {
  xcjsParams.code = isMapClick.value ? params.towndm : params.xzqdm
  let res = await getXcjskzqkData(xcjsParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  currentTableTitle.value.push(params.xzq)
  if (isMapClick.value) {
    currentTableTitle.value.push(params.town)
  }
  xcjs2XzList.value = modifiedList
  table2Title.value = '宣传警示开展情况'
  table2Title2.value = `-${currentTableTitle.value.join('-')}`
  show2Table.value = true
}

// 宣传警示开展情况-更多
const xcjsParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const xcjsMoreList = ref([])
const openXcjs = async () => {
  tableTitle.value = '宣传警示开展情况'
  xcjsParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getXcjskzqkData(xcjsParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  xcjsMoreList.value = modifiedList
  if (xcjsMoreList.value.length > 0) {
    showDetail.value = true
  }
}

// 宣传警示开展情况 -- msg
const xcjsMsg = ref({
  azds: '',
  azl: '',
})
const _getXcjskzqkMsgData = async () => {
  let res = await getXcjskzqkMsgData(ryssParams)
  xcjsMsg.value.azds = res?.data?.data[0].xggdjsbpds
  let azl = res?.data?.data[0].value
  if (azl === '100.00%') {
    azl = '100%'
  }
  xcjsMsg.value.azl = azl
}
// 5.清理液化石油气情况
// const qlyhsyqData = ref([
//   {
//     name: '发现石油液化气数量',
//     value: '0',
//     // unit: '个',
//   },
//   {
//     name: '清理隐患数量',
//     value: '0',
//     // unit: '个',
//   },
//   {
//     name: '整改率',
//     value: '0',
//     // unit: '%',
//   },
// ])
// const _getQlyhsyqqkData = async () => {
//   let res = await getQlyhsyqqkData(qlyhParams)
//   qlyhsyqData.value = res?.data?.data
// }
// const qlyhParams = reactive({
//   code: '',
//   type: '1',
//   startime: computed(() => timeRange.value[0]),
//   endtime: computed(() => timeRange.value[1]),
// })
// const qlyhMoreList = ref([])
// const openQlyh = async () => {
//   tableTitle.value = '清理液化石油气情况'
//   qlyhParams.code = isMapClick.value ? mapCode.value : ''
//   let res = await getQlyhsyqqkMoreData(qlyhParams)
//   let list = res.data.data
//   let modifiedList = list.map((item, index) => {
//     item.index = index + 1
//     return item
//   })
//   qlyhMoreList.value = modifiedList
//   if (qlyhMoreList.value.length > 0) {
//     showDetail.value = true
//   }
// }

// 6.中间卡片
const topList = ref([
  {
    name: '周自查率',
    name1: '今日自查',
    name2: '昨日自查',
    percent: '0',
    unit: '栋',
    value1: '0',
    value2: '0',
    url: urlzc,
  },
  {
    name: '周检查率',
    name1: '今日检查',
    name2: '昨日检查',
    percent: '0',
    unit: '栋',
    value1: '0',
    value2: '0',
    url: urljc,
  },
])
const topCardParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const _getTopCardData = async () => {
  topCardParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getTopCardData(topCardParams)
  const { jcl, nowdayjc, nowdayzc, yesterdayjc, yesterdayzc, zcl } =
    res.data.data
  topList.value[0].percent = zcl[0]
  topList.value[0].value1 = nowdayzc[0]
  topList.value[0].value2 = yesterdayzc[0]
  topList.value[0].url = urlzc
  topList.value[1].percent = jcl[0]
  topList.value[1].value1 = nowdayjc[0]
  topList.value[1].value2 = yesterdayjc[0]
  topList.value[1].url = urljc
}
// 自查率 区县
const tableTitle = ref('')
const zcQuList = ref([])
// 点击tab
const tabClick = async (item) => {
  tableTitle.value = item.name
  if (item.name === '周自查率') {
    ZclFn()
  } else if (item.name === '周检查率') {
    JclFn()
  }
}
const ZclFn = async () => {
  fglParams.type = '1'
  fglParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getFglData2(fglParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  zcQuList.value = modifiedList
  if (zcQuList.value.length > 0) {
    showDetail.value = true
  }
}
// 检查
const jcQuList = ref([])
const JclFn = async () => {
  fglParams.type = '2'
  fglParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getFglData2(fglParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  jcQuList.value = modifiedList
  if (jcQuList.value.length > 0) {
    showDetail.value = true
  }
}
// 自查率、检查率  弹框的标题、等级
const title2 = ref('')
const CurrentLevel = ref(1)
const maxL = ref(6)
const updateCurrentQu = (newCurrentQu, newCurrentLevel) => {
  let result = newCurrentQu.join('-')
  title2.value = result ? `-${result} ` : ''
  maxL.value = isMapClick.value ? 12 : 6
  CurrentLevel.value = newCurrentLevel
  //CurrentLevel.length
  fglParams.code = ''
}
const updateCurrentQu2 = (newCurrentQu, newCurrentLevel) => {
  let result = newCurrentQu.join('-')
  //console.log(tableTitle3.value);
  table2Title3.value = result ? `-${result} ` : ''
  // maxL.value = isMapClick.value ? 12 : 6
  CurrentTableLevel3.value = newCurrentLevel
  // console.log(maxL.value,'hihihihihihihihihi',CurrentLevel.value)

  fglParams.code = ''
}



// 左侧
const TablesRefRyssMore = ref(null)
const TablesRefDdcMore = ref(null)
const TablesRefHlccMore = ref(null)
const TablesRefCdsspbMore = ref(null)
const TablesRefXcjsMore = ref(null)
const TablesRefQlyhMore = ref(null)
const TablesRefJcxxMore = ref(null)
const TablesRefQtjyytMore = ref(null)
const TablesRefJcjsMore = ref(null)
// 中间
const TablesRefZcl = ref(null)
const TablesRefJcl = ref(null)
// 右侧
const TablesRefFgMore = ref(null)
const TablesRefFxMore = ref(null)
const TablesRefZgMore = ref(null)
//隐患类型
const  TablesRefYhlxMore = ref(null)

// 左侧点击单个
const Tables2RefRyss = ref(null)
const Tables2RefDdc = ref(null)
const Tables2RefHlcc = ref(null)
const Tables2RefCdss = ref(null)
const Tables2RefXcjs = ref(null)
const Tables2RefQlyh = ref(null)
const Tables2RefJcxx = ref(null)
const Tables2RefJcjs = ref(null)
// 右侧点击单个

const Tables8Ref = ref(null)
const Tables9Ref = ref(null)
const Tables10Ref = ref(null)
const backFn = () => {
  console.log('返回', tableTitle.value)
  if (tableTitle.value === '周自查率') {
    TablesRefZcl.value.backFn()
  } else if (tableTitle.value === '周检查率') {
    TablesRefJcl.value.backFn()
  } else if (tableTitle.value === '核查率') {
    // Tables2Ref.value.backFn()
  } else if (tableTitle.value === `${zjType.value}覆盖率`) {
    TablesRefFgMore.value.backFn()
  } else if (tableTitle.value === '隐患发现率') {
    TablesRefFxMore.value.backFn()
  } else if (tableTitle.value === '隐患整改率') {
    TablesRefZgMore.value.backFn()
  } else if (tableTitle.value === '人员疏散通道情况') {
    TablesRefRyssMore.value.backFn()
  } else if (tableTitle.value === '电动自行车违规情况') {
    TablesRefDdcMore.value.backFn()
  } else if (tableTitle.value === '护栏拆除情况') {
    TablesRefHlccMore.value.backFn()
  } else if (tableTitle.value === '充电设施配比情况') {
    TablesRefCdsspbMore.value.backFn()
  } else if (tableTitle.value === '宣传警示开展情况') {
    TablesRefXcjsMore.value.backFn()
  } else if (tableTitle.value === '清理液化石油气情况') {
    TablesRefQlyhMore.value.backFn()
  } else if (tableTitle.value === '基础信息') {
    TablesRefJcxxMore.value.backFn()
  } else if (tableTitle.value === '其他经营业态') {
    TablesRefQtjyytMore.value.backFn()
  } else if (tableTitle.value === '基础建设情况') {
    TablesRefJcjsMore.value.backFn()
  }
}

// 7.地图
const mapKey = ref(1)
const areaTypeMap = ref([])
const mapParams = reactive({
    code: '',
    type: '1',
    startime: computed(() => timeRange.value[0]),
    endtime: computed(() => timeRange.value[1]),
  })
// const mapData = ref([])
// const _getMapDataList = async () => {
//   let res = await getBaseInfoMapData()
//   let list = res.data.data.items
//   mapData.value = list
// }

// 8. 基本信息
const baseList = ref([
  {
    name: '租住人口数',
    value: 0,
    unit: '栋',
    url: url5,
  },
  {
    name: '出租房间数',
    value: 0,
    unit: '栋',
    url: url5,
  },
  {
    name: '电动自行车数量',
    value: 0,
    unit: '处',
    url: url5,
  },
  {
    name: '其他经营业态',
    value: 0,
    unit: '处',
    url: url5,
  },
])
const baseInfoParams = reactive({
  code: '',
})
const _getBaseInfoData = async () => {
  baseInfoParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getBaseInfoData(baseInfoParams)
  let arr = filterNames(res.data.data, [
    '租住人口数量',
    '出租房间数量',
    '电动自行车数量',
    '其他经营业态',
  ])
  arr.map((item, index) => {
    item.url = url5
  })
  baseList.value = arr
}
const filterNames = (arr, targetNames) => {
  const filteredObjects = []
  for (const item of arr) {
    if (targetNames.includes(item.name)) {
      filteredObjects.push(item)
    }
  }
  return filteredObjects
}
// 其他经营业态
const qtjyytMoreList = ref([])
const qtjyytParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const jcxxClick = async (item) => {
  if (item.name === '其他经营业态') {
    tableTitle.value = '其他经营业态'
    qtjyytParams.code = isMapClick.value ? mapCode.value : ''
    let res = await getBaseInfoData2(qtjyytParams)
    let list = res.data.data
    let modifiedList = list.map((item, index) => {
      item.index = index + 1
      return item
    })
    qtjyytMoreList.value = modifiedList
    if (qtjyytMoreList.value.length > 0) {
      showDetail.value = true
    }
  }
}

// 基础信息 - 更多
const jcxxParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})

const jcxxMoreList = ref([])
const openBJcxx = async () => {
  tableTitle.value = '基础信息'
  jcxxParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getBaseInfoData2(jcxxParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  jcxxMoreList.value = modifiedList
  if (jcxxMoreList.value.length > 0) {
    showDetail.value = true
  }
}
// 9. 基础建设情况
const baseJsList = ref([
  {
    name: '充电设施建设情况',
    value: 0,
    unit: '栋',
  },
  {
    name: '建设消防通道',
    value: 0,
    unit: '栋',
  },
  {
    name: '建设水源数量',
    value: 0,
    unit: '处',
  },
  {
    name: '自防自救力量建设情况',
    value: 0,
    unit: '处',
  },
])
const baseJsParams = reactive({
  code: '',
})
const _getBaseJSInfoData = async () => {
  baseJsParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getBaseJSInfoData(baseJsParams)
  let arr = res?.data?.data.slice(1, 5)
  arr.map((item, index) => {
    item.url = url5
  })
  baseJsList.value = arr
}
// 基础建设情况 - 更多
const jcjsParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const jcjsMoreList = ref([])
const openJcjs = async () => {
  tableTitle.value = '基础建设情况'
  jcjsParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getBaseJSInfoData2(jcjsParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  jcjsMoreList.value = modifiedList
  if (jcjsMoreList.value.length > 0) {
    showDetail.value = true
  }
}

// 10.自查覆盖率
const zcl_xData = ref([])
const zcl_sData = ref([])
const fglParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const _getFglData = async () => {
  let res = await getFglData(fglParams)
  let data = res?.data?.data
  const arr = convertDataToArray(data, 'zcl') // 指定 zcl 字段名
  zcl_xData.value = data?.name
  zcl_sData.value = arr
}
const convertDataToArray = (data, Field) => {
  const arr = []
  const codes = data.code
  const zcls = data[Field] // 根据字段名获取对应的 zcl 值
  for (let i = 0; i < codes.length; i++) {
    arr.push({
      value: zcls[i],
      code: codes[i],
    })
  }
  return arr
}
const zjType = ref('自查')
const zjLegendText = ref(['自查率'])
// 自查 - 按钮
const openZcRight1 = (item) => {
  activeZcfxlItem.value = item
  fglParams.type = '1'
  zjType.value = '自查'
  fglParams.code = isMapClick.value ? mapCode.value : ''
  zjLegendText.value = ['自查率']
  _getFglData()
}
// 检查 - 按钮
const openJcRight1 = (item) => {
  activeZcfxlItem.value = item
  fglParams.type = '2'
  zjType.value = '检查'
  fglParams.code = isMapClick.value ? mapCode.value : ''
  zjLegendText.value = ['检查率']
  _getFglData()
}
// 更多 - 按钮
const fgMoreList = ref([])
const openRight1 = async () => {
  tableTitle.value = `${zjType.value}覆盖率`
  fglParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getFglData2(fglParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.yhcount = Number(item.yhcount)
    item.zccount = Number(item.zccount)
    item.zcount = Number(item.zcount)
    item.zgcount = Number(item.zgcount)
    return item
  })
  fgMoreList.value = modifiedList
  if (fgMoreList.value.length > 0) {
    showDetail.value = true
  }
}
// 二级表格
const show2Table = ref(false)
const table2Title = ref('')
const table2Title2 = ref('')
const CurrentTable2Level = ref(1)
const backTable2Fn = () => {
  if (table2Title.value === '自查覆盖率') {
    Tables8Ref.value.backFn()
  } else if (table2Title.value === '隐患发现率') {
    Tables9Ref.value.backFn()
  } else if (table2Title.value === '隐患整改率') {
    Tables10Ref.value.backFn()
  } else if (table2Title.value === '人员疏散通道情况') {
    Tables2RefRyss.value.backFn()
  } else if (table2Title.value === '电动自行车违规情况') {
    Tables2RefDdc.value.backFn()
  } else if (table2Title.value === '护栏拆除情况') {
    Tables2RefHlcc.value.backFn()
  } else if (table2Title.value === '充电设施配比情况') {
    Tables2RefCdss.value.backFn()
  } else if (table2Title.value === '宣传警示开展情况') {
    Tables2RefXcjs.value.backFn()
  } else if (table2Title.value === '清理液化石油气情况') {
    Tables2RefQlyh.value.backFn()
  } else if (table2Title.value === '基础信息') {
    Tables2RefJcxx.value.backFn()
  } else if (table2Title.value === '基础建设情况') {
    Tables2RefJcjs.value.backFn()
  }
}
const changeTable2Visibe = (data) => {
  show2Table.value = data
  table2Title.value = ''
  CurrentTable2Level.value = 1
  currentTableTitle.value = []
  fglParams.code = ''
  fxlParams.code = ''
  zglParams.code = ''
  ryssParams.code = ''
  cdsspbParams.code = ''
  ddcParams.code = ''
  hlccParams.code = ''
  xcjsParams.code = ''
}
// 点击 自查覆盖率的柱子
const zclXzList = ref([])
const currentTableTitle = ref([])
const quCurrentZclClick = async (params) => {
  let code = params.data.code
  fglParams.code = code
  let res = await getFglData2(fglParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  let name = params.name + '区'
  if (isMapClick.value) {
    currentTableTitle.value.push(mapName.value)
  }
  currentTableTitle.value.push(name)
  zclXzList.value = modifiedList
  table2Title.value = '自查覆盖率'
  table2Title2.value = `-${currentTableTitle.value.join('-')}`
  show2Table.value = true
}
const updateTable2Zcl = (newCurrentQu, newCurrentLevel) => {
  currentTableTitle.value.push(...newCurrentQu)
  table2Title2.value = `-${currentTableTitle.value.join('-')}`
  maxL.value = isMapClick.value ? 18 : 12
  CurrentTable2Level.value = newCurrentLevel

  if (CurrentTable2Level.value.length === 12) {
    table2Title2.value = `-${currentTableTitle.value.join('-')}`
  } else {
    currentTableTitle.value.pop()
    table2Title2.value = `-${currentTableTitle.value.join('-')}`
  }
  fglParams.code = ''
}
// 11.隐患发现率
const fxl_xData = ref([])
const fxl_sData = ref([])
const fxlParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const _getFxlData = async () => {
  let res = await getYhfxlData(fxlParams)
  let data = res?.data?.data
  const arr = convertDataToArray(data, 'yhl')
  fxl_xData.value = data?.name
  fxl_sData.value = arr
}
// 自查 - 按钮
const openZcRight2 = (item) => {
  activeYhfxlItem.value = item
  fxlParams.type = '1'
  fxlParams.code = isMapClick.value ? mapCode.value : ''
  _getFxlData()
}
// 检查 - 按钮
const openJcRight2 = (item) => {
  activeYhfxlItem.value = item
  fxlParams.type = '2'
  fxlParams.code = isMapClick.value ? mapCode.value : ''
  _getFxlData()
}
// 更多 - 按钮
const fxMoreList = ref([])
const openRight2 = async () => {
  tableTitle.value = '隐患发现率'
  fxlParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getYhfxlData2(fxlParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.yhcount = Number(item.yhcount)
    item.zccount = Number(item.zccount)
    item.zcount = Number(item.zcount)
    item.zgcount = Number(item.zgcount)
    return item
  })
  fxMoreList.value = modifiedList
  if (fxMoreList.value.length > 0) {
    showDetail.value = true
  }
}
// 点击发现率
const fxlXzList = ref([])
const quCurrentFxlClick = async (params) => {
  let code = params.data.code
  fxlParams.code = code
  let res = await getYhfxlData2(fxlParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  let name = params.name + '区'
  if (isMapClick.value) {
    currentTableTitle.value.push(mapName.value)
  }
  currentTableTitle.value.push(name)
  fxlXzList.value = modifiedList
  table2Title.value = '隐患发现率'
  table2Title2.value = `-${currentTableTitle.value.join('-')}`
  show2Table.value = true
}

// 12.隐患整改率
const zgl_xData = ref([])
const zgl_sData = ref([])
const zglParams = reactive({
  code: '',
  type: '1',
  startime: computed(() => timeRange.value[0]),
  endtime: computed(() => timeRange.value[1]),
})
const _getYhzglData = async () => {
  let res = await getYhzglData(zglParams)
  let data = res?.data?.data
  const arr = convertDataToArray(data, 'zgl')
  zgl_xData.value = data?.name
  zgl_sData.value = arr
}
// 自查 - 按钮
const openZcRight3 = (item) => {
  activeYhzglItem.value = item
  zglParams.type = '1'
  zglParams.code = isMapClick.value ? mapCode.value : ''
  _getYhzglData()
}
// 检查 - 按钮
const openJcRight3 = (item) => {
  activeYhzglItem.value = item
  zglParams.type = '2'
  zglParams.code = isMapClick.value ? mapCode.value : ''
  _getYhzglData()
}
// 更多 - 按钮
const zgMoreList = ref([])
const openRight3 = async () => {
  tableTitle.value = '隐患整改率'
  zglParams.code = isMapClick.value ? mapCode.value : ''
  let res = await getYhzglData2(zglParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.yhcount = Number(item.yhcount)
    item.zccount = Number(item.zccount)
    item.zcount = Number(item.zcount)
    item.zgcount = Number(item.zgcount)
    return item
  })
  zgMoreList.value = modifiedList
  if (zgMoreList.value.length > 0) {
    showDetail.value = true
  }
}

const zglXzList = ref([])
const quCurrentZglClick = async (params) => {
  let code = params.data.code
  zglParams.code = code
  let res = await getYhzglData2(zglParams)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  let name = params.name + '区'
  if (isMapClick.value) {
    currentTableTitle.value.push(mapName.value)
  }
  currentTableTitle.value.push(name)
  zglXzList.value = modifiedList
  table2Title.value = '隐患整改率'
  table2Title2.value = `-${currentTableTitle.value.join('-')}`
  show2Table.value = true
}

// 13.隐患类型分析
const yhqxzbData = ref([])
const yhlxfxParams = reactive({
  code: '',
  type: '1',
  // startime: computed(() => timeRange.value[0]),
  // endtime: computed(() => timeRange.value[1]),
  startime: '2023-01-01',
  endtime: '2026-01-01',
})
const _getYhlxfxData = async () => {
  let res = await getYhlxfxData(yhlxfxParams)
  let data = res?.data?.data
  let newArr = data.map(({ name, percentage_total_count }) => ({
    value: percentage_total_count,
    name,
  }))
  yhqxzbData.value = newArr
}
const openRight4 = () => {
  chartTitle.value = '隐患类型分析'
  showChart.value = true
}
// 隐患类型分析 -- 更多
const showChart = ref(false)
const chartTitle = ref('')
const changeChartVisibe = (data) => {
  showChart.value = data
}
// 点击地图区
const mapCode = ref('')
const mapName = ref('')
const isMapClick = ref(false)
const quCurrentMapClick = (parmas) => {
  isMapClick.value = true
  mapCode.value = parmas.data.code
  mapName.value = parmas.name
  // 1.人员疏散通道
  ryssParams.code = mapCode.value
  _getRysstdData()
  // 2.护栏拆除情况
  hlccParams.code = mapCode.value
  _getHlccqkData()
  // 3.护栏拆除情况
  xcjsParams.code = mapCode.value
  _getXcjskzqkData()
  // 4.电动自行车违规情况
  ddcParams.code = mapCode.value
  _getDDzxcwgqkData()
  // 充电设施配比情况
  cdsspbParams.code = mapCode.value
  _getCdsspbqkData()
  // // 5.清理液化石油气情况
  // qlyhParams.code = mapCode.value
  // _getQlyhsyqqkData()
  // 6.中间卡片
  topCardParams.code = mapCode.value
  _getTopCardData()
  // 8. 基本信息
  baseInfoParams.code = mapCode.value
  _getBaseInfoData()
  // 9. 基础建设情况
  baseJsParams.code = mapCode.value
  _getBaseJSInfoData()
  // 10.自查覆盖率
  fglParams.code = mapCode.value
  _getFglData()
  // 11.隐患发现率
  fxlParams.code = mapCode.value
  _getFxlData()
  // 12.隐患整改率
  zglParams.code = mapCode.value
  _getYhzglData()
}
// 点击返回
const backMapFn = () => {
  isMapClick.value = false
  mapCode.value = ''
  mapName.value = ''
  // 1.人员疏散通道
  ryssParams.code = mapCode.value
  _getRysstdData()
  // 2.护栏拆除情况
  hlccParams.code = mapCode.value
  _getHlccqkData()
  // 3.护栏拆除情况
  xcjsParams.code = mapCode.value
  _getXcjskzqkData()
  // 4.电动自行车违规情况
  ddcParams.code = mapCode.value
  _getDDzxcwgqkData()
  // 充电设施配比情况
  cdsspbParams.code = mapCode.value
  _getCdsspbqkData()
  // // 5.清理液化石油气情况
  // qlyhParams.code = mapCode.value
  // _getQlyhsyqqkData()
  // 6.中间卡片
  topCardParams.code = mapCode.value
  _getTopCardData()
  // 8. 基本信息
  baseInfoParams.code = mapCode.value
  _getBaseInfoData()
  // 9. 基础建设情况
  baseJsParams.code = mapCode.value
  _getBaseJSInfoData()
  // 10.自查覆盖率
  fglParams.code = mapCode.value
  _getFglData()
  // 11.隐患发现率
  fxlParams.code = mapCode.value
  _getFxlData()
  // 12.隐患整改率
  zglParams.code = mapCode.value
  _getYhzglData()
}
// 时间更新
const timeUpDate = () => {
  _getTopCardData() // 中间卡片
  _getFglData() // 自查覆盖率
  _getFxlData() // 隐患发现率
  _getYhzglData() // 隐患整改率
  _getYhlxfxData() // 隐患类型分析
}

const chartKey = ref(1) // key
//判断时间是否为个位数，如果时间为个位数就在时间之前补上一个“0”
const check = (val) => {
  if (val < 10) {
    return '0' + val
  } else {
    return val
  }
}
const displayTime = () => {
  //获取系统当前的年、月、日、小时、分钟、毫秒
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  let hour = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  dates.value = `${year}年${month}月${day}日 ${check(hour)}:${check(
    minutes
  )}:${check(seconds)}`
}
const currentDate = () => {
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  // 往前推算的时间，推算 7 天前
  const daysToSubtract = 7
  const pastDate = new Date(date)
  pastDate.setDate(day - daysToSubtract)
  let pastYear = pastDate.getFullYear()
  let pastMonth = pastDate.getMonth() + 1
  let pastDay = pastDate.getDate()
  let past7Date = `${pastYear}-${check(pastMonth)}-${check(pastDay)}`
  let currentData = `${year}-${check(month)}-${check(day)}`
  timeRange.value = [`${past7Date}`, `${currentData}`]
}

const yearRange = ref([])
const getCurrentYear = () =>{
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  // 往前推算的时间，推算 7 天前
  // const daysToSubtract = 7
  // const pastDate = new Date(date)
  // pastDate.setDate(day - daysToSubtract)
  let pastYear = pastDate.getFullYear()
  // let pastMonth = pastDate.getMonth() + 1
  // let pastDay = pastDate.getDate()
  let past7Date = `${pastYear}-01-01`
  let currentData = `${year}-${check(month)}-${check(day)}`
  yearRange.value = [`${past7Date}`, `${currentData}`]

}

//每隔1秒调用一次displayTime函数
const start = () => {
  setInterval(() => {
    displayTime()
  }, 1000) //单位是毫秒
}
// 每隔 5分钟 调用一次
const task10Min = () => {
  setInterval(() => {
    _getTopCardData() // 卡片
    //_getMapDataList() // 地图
    _getFglData() // 10.自查覆盖率
    _getFxlData() // 11.隐患发现率
    _getYhzglData() // 12.隐患整改率
    _getYhlxfxData() // 13.隐患类型分析
  }, 600000) // 10分钟的毫秒数 300000
}
const task1Day = () => {
  setInterval(() => {
    _getRysstdData() // 1.人员疏散通道
    _getRysstdMsgData() // 1.人员疏散通道 msg
    _getDDzxcwgqkData() // 2.电动自行车违规情况
    _getDDzxcwgqkMsgData() // 2.电动自行车违规情况 msg
    _getCdsspbqkData() // 充电设施配比情况
    _getHlccqkData() // 3.护栏拆除情况
    _getHlccqkMsgData() // 3.护栏拆除情况 msg
    _getXcjskzqkData() // 4.宣传警示开展情况
    _getXcjskzqkMsgData() // 4.宣传警示开展情况 msg
    // _getQlyhsyqqkData() // 5.清理液化石油气情况
    _getBaseInfoData() // 8.基本信息
    _getBaseJSInfoData() // 9.基础建设情况
  }, 600000 * 6 * 24) // 一天的毫秒数
}
onMounted(async () => {
  await currentDate()
  start()
  task10Min()
  task1Day()
  _getRysstdData()
  _getRysstdMsgData() // 1.人员疏散通道 msg
  _getDDzxcwgqkData()
  _getDDzxcwgqkMsgData() // 2.电动自行车违规情况 msg
  _getCdsspbqkData()
  _getHlccqkData()
  _getHlccqkMsgData() // 3.护栏拆除情况 msg
  _getXcjskzqkData()
  _getXcjskzqkMsgData() // 4.宣传警示开展情况 msg
  _getTopCardData() // 中间卡片
  _getBaseInfoData() //
  _getBaseJSInfoData() //
  _getFglData() // 自查覆盖率
  _getFxlData() // 隐患发现率
  _getYhzglData() // 隐患整改率
  _getYhlxfxData() // 隐患类型分析
  // _getQlyhsyqqkData()
  _getHouseCount() // 房屋总数
  //_getMapDataList() // 地图
})
const getMapList = (id) => {
  params.value.city = id
  chartKey.value++
}

const resetMap = () => {
  chartKey.value++
  mapKey.value++
  params.value.city = undefined
}

// 切换
const gotoScreen = (act) => {
  console.log(act, 'gxn')
  router.push({
    path: '/bigScreen',
    query: {
      act: act,
    },
  })
}
const goFn = () => {
  console.log('header====')
}

const showDetail = ref(false)
const type = ref()
const changeModalVisibe = (data) => {
  showDetail.value = data
  CurrentLevel.value = 1
  title2.value = ''
  // 清空 - 左侧 - 行政区代码
  ryssParams.code = ''
  ddcParams.code = ''
  cdsspbParams.code = ''
  hlccParams.code = ''
  xcjsParams.code = ''
  //qlyhParams.code = ''
  jcxxParams.code = ''
  jcjsParams.code = ''
  // 清空 - 右侧 - 行政区代码
  fglParams.code = ''
  fxlParams.code = ''
  zglParams.code = ''
}

// 选择日期的回调
const timeChange = (value) => {
  timeRange.value = [value[0], value[1]]
  timeUpDate()
}
</script>

<style scoped="scoped" lang="scss">
@font-face {
  font-family: 'ffa';
  src: url(@/assets/bigScreen/fonts/DS-DIGIB.TTF);
}
ul,
li {
  list-style: none;
}
.big-box {
  // background-color: #e7250c;
  background-color: #071c3b;
  height: 100vh;
  overflow: hidden;
  .header {
    // text-align: center;
    position: relative;
    height: 7.5rem;
    // border: 1px solid red;
    background-image: url('@/assets/bigScreen1/header.png');
    background-repeat: no-repeat;
    background-size: 100% 40%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    .h-left {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      display: flex;
      align-items: center;
      .time {
        width: 60%;
        // border: 1px solid red;
        margin-top: 1rem;
        line-height: 4rem;
        font-size: 1vw;
        height: 4rem;
        display: flex;
        align-items: center;
        .date {
          margin-left: 2rem;
        }
      }
      .tq {
        width: 40%;
        margin-top: 1rem;
        line-height: 4rem;
        font-size: 1vw;
        height: 4rem;
        display: flex;
        align-items: center;
        img {
          width: 32px;
          height: 32px;
        }
        .tq-text {
          margin-left: 2rem;
        }
      }
    }
    .h-center {
      width: 34%;
      height: 100%;
      // border: 1px solid sandybrown;
      line-height: 8rem;
      .title {
        color: #23b9eb;
        text-align: center;
        font-size: 1.8vw;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight: bold;
      }
    }
    .h-right {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .time-title {
        line-height: 5rem;
        font-size: 1vw;
        height: 4rem;
      }
      .time-content {
        margin-top: 1rem;
        ::v-deep .el-input__wrapper {
          background-color: transparent;
        }
        ::v-deep .el-range-input {
          color: #fff;
        }
        ::v-deep .el-range-separator {
          color: #fff;
        }
        // ::v-deep .el-date-range-picker {
        //   background-color: transparent;
        // }
        // ::v-deep .el-date-range-picker__time-header {
        //   background-color: red;
        // }
      }
    }
  }
  .content {
    height: calc(100vh - 9rem);
    padding: 0 1rem 1rem;
    // border: 1px solid red;
    .box-con {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .main-l {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .m-l-top {
          height: 20%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
            .sta-box {
              height: 100%;
              padding: 2rem;
              display: flex;
              // align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;
              box-sizing: border-box;

              @keyframes fadenum {
                100% {
                  transform: rotate(360deg);
                }
              }

              .sta-li {
                width: calc((100% - 2rem) / 2);
                height: calc((100% - 2rem) / 2);
                border-radius: 0.6rem;
                background: #00183b;
                border: 0.1rem solid rgba(45, 205, 255, 0.17);
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding: 0 0rem;
                &:nth-child(n + 3) {
                  margin-top: 2rem;
                }
                img {
                  width: 6rem;
                  height: 6rem;
                  animation: fadenum 2s infinite;
                }
                .sta-li-r {
                  // border: 1px solid red;
                  height: 4rem;
                  .text {
                    font-size: 0.8vw;
                    line-height: 1.7rem;
                    color: rgba(255, 255, 255, 0.64);
                    margin-bottom: 1rem;
                  }
                  .count {
                    text-align: right;
                    font-size: 1.1vw;
                    line-height: 2.2rem;
                    color: rgba(255, 255, 255, 0.87);
                    font-weight: bold;
                  }
                }
              }
            }
          }
        }
        .m-l-center {
          height: 20%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
          }
        }
        .m-l-bottom {
          height: 19%;
          border: 2px solid #274187;
          .content1 {
            height: calc(100% - 4rem);
          }
        }
        .m-l-bottom1 {
          height: 15%;
          border: 2px solid #274187;
          .content1 {
            height: calc(100% - 4rem);
          }
        }
      }
      .main-c {
        width: 49%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // border: 1px solid red;
        .m-c-top {
          height: 15%;
          border: 2px solid #274187;
          width: 100%;
          .top-list {
            display: flex;
            justify-content: space-between;
            // border: 1px solid red;
            height: 100%;
            width: 100%;
            .l-item {
              background: url('@/assets/bigScreen1/item.png') no-repeat;
              background-size: 100% 100%;
              height: calc(100% - 2rem);
              width: 45%;
              display: flex;
              justify-content: space-between;
              padding: 1rem;
              cursor: pointer;
              .icon {
                width: 20%;
                // border: 1px solid red;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .zcl {
                width: 22%;
                border: 2px solid rgb(16, 248, 198, 0.3);
                // box-shadow: 5px 5px 5px rgba(94, 245, 175, 0.3),
                //   -5px -5px 5px rgba(94, 245, 175, 0.3);
                border-radius: 5%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .top {
                  height: 4rem;
                  // border: 1px solid red;
                  line-height: 4rem;
                  font-size: 0.9vw;
                }
                .bottom {
                  font-size: 1.2vw;
                  display: flex;
                  align-items: center;
                  color: #20dbfd;
                }
              }
              .jzcs {
                width: 52%;
                // border: 2px solid rgb(16, 248, 198, 0.3);
                // box-shadow: 5px 5px 5px rgba(94, 245, 175, 0.3),
                //   -5px -5px 5px rgba(94, 245, 175, 0.3);
                border-radius: 5%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                .item {
                  .title {
                    font-size: 1vw;
                    font-style: italic;
                  }
                  .value {
                    font-size: 1vw;
                    color: #25fab3;
                  }
                  .unit {
                    font-size: 1vw;
                    margin-left: 1rem;
                    color: #20dbfd;
                    font-style: italic;
                  }
                }
              }
            }
          }
        }
        .m-c-center {
          height: 56%;
          border: 2px solid #274187;
        }
        .m-c-bottom {
          height: 26%;
          // border: 2px solid #274187;
          // border: 1px solid red;
          .wrap {
            // padding: 1rem;
            height: calc(100% - 4px);
            // height: 100%;
            display: flex;
            justify-content: space-between;
            .b-left {
              height: 100%;
              width: 49%;
              // border: 1px solid red;
              border: 2px solid #274187;
              .content1 {
                height: calc(100% - 4rem);
                // border: 1px solid red;
                .sta-box {
                  height: 100%;
                  padding: 1rem;
                  display: flex;
                  // align-items: center;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  box-sizing: border-box;

                  @keyframes fadenum {
                    100% {
                      transform: rotate(360deg);
                    }
                  }

                  .sta-li {
                    width: calc((100% - 2rem) / 2);
                    height: calc((100% - 2rem) / 2);
                    border-radius: 0.6rem;
                    background: #00183b;
                    border: 0.1rem solid rgba(45, 205, 255, 0.17);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    padding: 0 0rem;
                    &:nth-child(n + 3) {
                      margin-top: 2rem;
                    }
                    img {
                      width: 6rem;
                      height: 6rem;
                      animation: fadenum 2s infinite;
                    }
                    .sta-li-r {
                      // border: 1px solid red;
                      height: 4rem;
                      .text {
                        font-size: 0.7vw;
                        line-height: 1.7rem;
                        color: rgba(255, 255, 255, 0.64);
                        margin-bottom: 1rem;
                      }
                      .count {
                        text-align: right;
                        font-size: 1.1vw;
                        line-height: 2.2rem;
                        color: rgba(255, 255, 255, 0.87);
                        font-weight: bold;
                      }
                    }
                  }
                }
              }
            }
            .b-right {
              height: 100%;
              width: 49%;
              // border: 1px solid red;
              border: 2px solid #274187;
              .content1 {
                height: calc(100% - 4rem);
                // border: 1px solid red;
                .sta-box {
                  height: 100%;
                  padding: 1rem;
                  display: flex;
                  // align-items: center;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  box-sizing: border-box;
                  @keyframes fadenum {
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  .sta-li {
                    width: calc((100% - 2rem) / 2);
                    height: calc((100% - 2rem) / 2);
                    border-radius: 0.6rem;
                    background: #00183b;
                    border: 0.1rem solid rgba(45, 205, 255, 0.17);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    padding: 0 0rem;
                    &:nth-child(n + 3) {
                      margin-top: 2rem;
                    }
                    img {
                      width: 6rem;
                      height: 6rem;
                      animation: fadenum 2s infinite;
                    }
                    .sta-li-r {
                      // border: 1px solid red;
                      height: 4rem;
                      .text {
                        font-size: 0.7vw;
                        line-height: 1.7rem;
                        color: rgba(255, 255, 255, 0.64);
                        margin-bottom: 1rem;
                      }
                      .count {
                        text-align: right;
                        font-size: 1.1vw;
                        line-height: 2.2rem;
                        color: rgba(255, 255, 255, 0.87);
                        font-weight: bold;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .main-r {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .m-r-top {
          height: 24%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
          }
        }
        .m-r-center {
          height: 24%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
          }
        }
        .m-r-bottom {
          height: 24%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
          }
        }
      }
    }
  }
}
.h4s {
  height: 4.5rem;
  line-height: 4.5rem;
  background-image: url('@/assets/bigScreen/title-bg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem 0.3rem 4.7rem;
  box-sizing: border-box;

  .tit-l {
    font-size: 0.9vw;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

    span {
      font-size: 0.7vw;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.62);
      margin-left: 1.8rem;
    }
  }
  .tit-r {
    display: flex;
    align-items: center;
  }
  .more {
    font-size: 0.6vw;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
    cursor: pointer;
  }
}
.h4s-ts {
  background-image: url('@/assets/bigScreen/title-bg31.png');
}
.h4s-ts2 {
  background-image: url('@/assets/bigScreen/title-bg32.png');
}

.title-item {
  height: 4rem;
  line-height: 3rem;
  font-size: 0.8vw;
  padding: 0 1rem;
  // border: 1px solid red;
  background-image: url('@/assets/bigScreen1/title.png');
  background-repeat: no-repeat;
  background-size: 100% 90%;
  display: flex;
  justify-content: space-between;
  .t-title{
    display: flex;
    width: auto;
    flex-wrap: nowrap;
    // border:1px solid red;
  }
  .t-content {
    margin-left: 0.5rem;
    flex: 1;
    display: flex;
    line-height: 3rem;
    height: 3rem;
    font-size: 0.6vw;
    .ydb {
    }
    .wdb {
      margin: 0 5px;
    }
    .dbl {
    }
  }
  .btns {
    display: flex;
    .more {
      cursor: pointer;
      font-size: 0.9vw;
      width: 100px;
      height: 2.5rem;
      line-height: 2.5rem;
      display: flex;
      border: 2px solid rgb(16, 152, 243);
      border-radius: 5%;
      text-align: center;
      .zc {
        width: 50%;
        border: 1px solid rgb(16, 152, 243);
        &:hover {
          color: #20dbfd;
        }
      }
      .jc {
        width: 50%;
        border: 1px solid rgb(16, 152, 243);
        &:hover {
          color: #20dbfd;
        }
      }
    }
    .m-btns {
      cursor: pointer;
      height: 2.8rem;
      line-height: 2.8rem;
      margin-left: 1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.active-item {
  color: #01e7f6;
}
.table-style {
  // border: 1px solid red;
  height: calc(100% - 3rem);
}
.chart-style {
  height: calc(100% - 1rem);
}
.isActive {
  color: #fff;
  background-color: #1098f3;
}

.ages-box {
  display: flex;
  justify-content: center;
  align-items: center;
  // padding: 0 1rem;
  // height: calc(100% - 7rem);
  height: 8rem;
  margin-top: 1rem;
  // border: 1px solid red;
  .ages-box-item {
    width: 44.3%;
    height: 100%;
    background: url('@/assets/bigScreen/achievement1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    text-align: center;
    cursor: pointer;
    // max-height: 12rem;
    h6 {
      font-size: 3rem;
      font-weight: bold;
      color: #00e0fc;
    }
    img {
      width: 15rem;
      height: 10rem;
    }
  }
  .ages-box-item:nth-child(2) {
    background: url('@/assets/bigScreen/achievement2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .ages-box-item:nth-child(3) {
    background: url('@/assets/bigScreen/achievement3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
}
</style>
